<template>
  <div class="container">
    <!-- 顶部分类列表 -->
    <div class="category-list" ref="categoryListRef">
      <ul>
        <li v-for="(category, index) in categories"
            :key="index"
            :class="['category-item', { 'selected': selectedCategory === category.name }]"
            @click="selectCategory(category.name, index)">
          {{ category.name }}
        </li>
      </ul>
    </div>

    <!-- 游戏列表 -->
    <div class="game-list">
      <div class="game-item-div" v-for="game in games" :key="game.id" @click="toDetail(game.id)">
        <div class="game-item">
          <!-- 左侧游戏图标 -->
          <img :src="game.icon" alt="游戏图标" class="game-icon">

          <!-- 游戏信息部分 -->
          <div class="game-info">
            <div class="game-name-div">
              <!-- 游戏名称 -->
              <span class="game-name">{{ game.name }}</span>
              <span v-if="game.cate == 20" class="tag unified-rare-tag">稀有</span>
              <span v-if="game.cate == 90" class="tag unified-buyout-tag">买断</span>
              <span class="tag">安卓{{game.apple ? '+苹果' : ''}}</span>
            </div>
            <!-- 游戏标签 -->
            <div class="game-tags">
              <span v-for="tag in tagsArray(game.tags)" :key="tag" class="tag">{{ tag }}</span>
            </div>
            <!-- 游戏描述 -->
            <span class="game-desc">{{ game.intro }}</span>
          </div>

          <!-- 下载按钮 -->
          <router-link :to="'/download?gameId=' + game.id" class="download-btn">下载</router-link>
        </div>
        <div class="game-screenshots">
          <img v-for="(url, index) in game.pics" :key="index" :src="url" alt="截图">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameCategory'
}
</script>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const categories = ref([]) // 分类列表
const games = ref([]) // 分类下游戏列表
const selectedCategory = ref('全部') // 默认选中分类
const categoryListRef = ref(null) // 分类列表的引用

// 获取分类列表
const getCategories = async () => {
  try {
    const response = await fetch("/api/game/categories", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "accept": "application/json, text/plain, */*",
        "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6"
      }
    })
    const data = await response.json()
    categories.value = data
  } catch (error) {
    console.error('获取分类数据失败:', error)
  }
}

// 选择分类并获取对应游戏
const selectCategory = async (category, index) => {
  selectedCategory.value = category
  try {
    const response = await fetch("/api/game/getGamesByCate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "accept": "application/json, text/plain, */*",
        "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6"
      },
      body: JSON.stringify({ category: selectedCategory.value })
    })
    const data = await response.json()
    games.value = data

    // 滚动到选中的分类项
    const categoryItems = categoryListRef.value.querySelectorAll('.category-item')
    const selectedItem = categoryItems[index]
    const containerWidth = categoryListRef.value.offsetWidth
    const itemLeft = selectedItem.offsetLeft
    const itemWidth = selectedItem.offsetWidth
    const scrollLeft = itemLeft - (containerWidth - itemWidth) / 2

    categoryListRef.value.scrollTo({
      left: scrollLeft,
      behavior: 'smooth'
    })
  } catch (error) {
    console.error('获取游戏数据失败:', error)
  }
}

// 跳转到详情页
const toDetail = (gameId) => {
  router.push({
    path: '/detail',
    query: { gameId }
  })
}

// 将 tags 字符串按逗号分割为数组
const tagsArray = (tags) => {
  if (tags) {
    return tags.split(',')
  }
  return []
}

onMounted(() => {
  getCategories()
  selectCategory('全部', 0)
})
</script>

<style scoped>
/* 基本样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}

/* 容器 */
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
}

/* 顶部分类栏 */
.category-list {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
}

.category-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.category-list ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
  display: inline-flex;
  box-sizing: border-box;
}

.category-item {
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.category-item:hover {
  background-color: #f1f1f1;
}

.category-item.selected {
  background-color: #007bff;
  color: white;
}

/* 游戏列表 */
.game-list {
  padding: 10px;
  padding-bottom: 100px;
  box-sizing: border-box;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}

.game-item-div {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 15px;
  cursor: pointer;
  transition: transform 0.2s ease;
  box-sizing: border-box;
}

.game-item-div:hover {
  transform: translateY(-2px);
}

.game-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.game-icon {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.game-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-name-div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.tag {
  background-color: #e9ecef;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.game-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.download-btn {
  padding: 6px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.download-btn:hover {
  background-color: #0056b3;
}

.game-screenshots {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 15px;
  gap: 5px;
}

.game-screenshots img {
  width: calc(33.33% - 4px);
  height: auto;
  border-radius: 8px;
  max-width: 100%;
}

.game-screenshots img:nth-child(1):only-child {
  width: 100%;
}

.unified-rare-tag {
  background-color: #B8860B;
  color: #FFF8DC;
  font-weight: bold;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
}

.unified-buyout-tag {
  background-color: #1976D2;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .container {
    padding: 0;
  }

  .category-list {
    padding: 8px 0;
  }

  .category-item {
    font-size: 14px;
    padding: 6px 12px;
  }

  .game-item {
    flex-direction: row;
    align-items: flex-start;
  }

  .game-icon {
    width: 60px;
    height: 60px;
  }

  .game-name {
    font-size: 16px;
  }

  .game-desc {
    font-size: 12px;
  }

  .download-btn {
    padding: 4px 8px;
    font-size: 12px;
  }
}
</style> 